<template>
  <div id="app">
    <!-- ref -->
    <template v-if="false">
      <h1>ref</h1>
      <h1 v-text="message" ref="h1"></h1> <button @click="showDom">点我输出上分的DOM元素</button>
      <School msg="Welcome to Your Vue.js App" ref="school" />
      <br><hr>
    </template>

    <!-- props配置项 -->
    <template v-if="false">
      <h1>props</h1>
      <ol>
        <li v-for="item,index in studentList" :key="index">
          <Student :studentObj="item"  />
        </li>
      </ol>
      <br><hr>
    </template>

    <!-- mixin 混入 -->
    <template v-if="false">
      <h1>mixin</h1>
      <h2>使用mixins局部混入配置项或者使用 Vue.mixin(mixin_name)</h2>
      <SchoolMixin />
      <StudentMixin />
    </template>

    <!-- 插件 -->
    <template v-if="false">
      <h1>插件</h1>
      <School />
      <button @click="demo('jake')">测试demo方法</button>
    </template>

    <!-- todoList案例 -->
    
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/StudentProps.vue'

import SchoolMixin from './components/SchoolMixin.vue'
import StudentMixin from './components/StudentMixin.vue'
export default {
  name: 'App',
  components: {
    School, Student, SchoolMixin, StudentMixin
  },
  data () {
    return {
      message:'欢迎学习vue',
      studentList:[
        {
          name:'张三',
          age:12,
          sex:'男'
        },{
        name:'李四',
        age:14,
        sex:'女'
        }
      ],
    }
  },
  mounted() {
    this.demo('王玉杰')
  },
  methods: {
    showDom(){
      let node = this.$refs['h1']
      let node2 = document.querySelector('h1')
      let node3 = this.$refs['school']
      console.log('ref', node);
      console.log('document', node2);
      console.log('VueComponent', node3);
    }
  },
}
</script>

<style>

</style>
